<template>
	<header>
		<div class="toolbar" v-on:click="show = !show">
		<span class="glyphicon glyphicon-menu-hamburger"></span>
		</div>
		<div class="address">
			<span class="title">{{title}}</span>
			<div class="header-right">
				<span class="address">深圳</span>
				<span class="glyphicon glyphicon-menu-down"></span>
			</div>
		</div>
		<router-link :to="{name:'login'}">
			<div class="user">
				<span class="glyphicon glyphicon-user"></span>
			</div>
		</router-link>
		<transition name='slide-fade'>
			<nav class="layer" v-if='show' v-on:click='show = !show'>
				<ul>
					<li>
						<router-link :to="{name:'home'}">
							首页
							<span class="glyphicon glyphicon-menu-right"></span>
						</router-link>
					</li>
					<li>
						<router-link :to="{name:'list'}">
						影片
						<span class="glyphicon glyphicon-menu-right"></span>
						</router-link>
					</li>
					<li>
						<router-link :to="{name:'cinema'}">
							影院
							<span class="glyphicon glyphicon-menu-right"></span>
						</router-link>
					</li>
				</ul>
			</nav>
		</transition>
	</header>
</template>
<script>
	export default{
		data:function () {
			return {
				show: false
			}
		},
		props:['title']
	}
</script>